import React,{useState} from "react";
import {Button} from 'antd';
import {flushSync} from 'react-dom';
/**
 * useState自带了优化性能的机制：
 *  + 每一次修改状态值的时候，会拿最新修改的值和之前的状态做比较[基于 Object.is做比较]
 *  + 如果发现两次的值是一样的，则不会修改状态，也不会让视图更新[可以理解为：类似于 PureComponent,在 shouldComponentUpdate 中做了浅比较和优化]
 */
function Demo3(props){
    console.log('我爱公主');
    let [x,setX] = useState(10)
    const handler = ()=>{
        for(let i = 0 ; i<10;i++){
            setX(prev=>{
                //prev:存储上一次的状态值
                console.log(prev);
                return prev + 1;//返回的信息是我们要修改的状态值
            })
        }
        // setX(NaN)
    }
    return <div>
        <span>X:{x}</span>
        <Button onClick={handler}>点我加一</Button>
    </div>
}
export default Demo3